<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>我们科技-版权登记</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link rel="icon" type="image/x-icon" th:href="@{~/images/favicon_zn.ico}">
<link href="../static/css/bootstrap.css" th:href="@{~/css/bootstrap.css}" rel='stylesheet' type='text/css' />
<link href="../static/css/font-awesome.css" rel="stylesheet" th:href="@{~/css/font-awesome.css}"> 
<link rel="stylesheet" href="../static/css/slider.css" th:href="@{~/css/slider.css}">
<link href="../static/css/style.css" rel='stylesheet' type='text/css' th:href="@{~/css/style.css}"/>	
<link rel="stylesheet" type="text/css" href="../static/css/mislider.css" th:href="@{~/css/mislider.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/mislider-skin-cameo.css" th:href="@{~/css/mislider-skin-cameo.css}"/>
<link th:href="@{/css/nav.css}" rel='stylesheet' type='text/css' />
<link rel="stylesheet" th:href="@{~/css/animate.css}">
<link rel="stylesheet" th:href="@{~/css/global.css}">
<link rel="stylesheet" th:href="@{~/css/loading.css}">
<style type="text/css">
	 body{background: #f0f0f0;}
	.top_header_agile_info_w3ls{background: #fff;}
</style>
</head>
	<body>
	<div id="" style="position: relative;">
	

	<div class="top_banner" id="topl">
		<!-- SVG Arrows -->
		<div class="svg-wrap">
			<svg width="64" height="64" viewBox="0 0 64 64">
				<path id="arrow-left" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" />
			</svg>
			<svg width="64" height="64" viewBox="0 0 64 64">
				<path id="arrow-right" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" />
			</svg>
		</div>
		<div class="top_header_agile_info_w3ls">
		  <nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">版权</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<h1><a class="navbar-brand" href="index.html"  th:href="@{/}"><img src="../static/images/logoll_zn.png" th:src="@{~/images/logoll_zn.png}"/></a><span class="ospan">版权登记</span></h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<style type="text/css">
	.m_nav li>a {color: #666; font-weight: 600;}
	.top_header_agile_info_w3ls{border-bottom: 1px solid #ccc;}
	.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus{color: #666;}
	.ospan{margin: 15px; display: inline-block;}
.dropbtn {
	color: #666;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	font-weight: 600;
}

/*容器 <div> - 需要定位下拉内容 */
.dropdown {
	position: relative;
	display: inline-block;
}

/*下拉内容 (默认隐藏) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/*下拉菜单的链接 */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/*鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
	background-color: #f1f1f1
}

/*在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
	display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
	color: #3e8e41;
}
</style>
					<div id="m_nav_container" class="m_nav wthree_bg">
						<nav class="menu menu--sebastian">
							<!-- <ul id="m_nav_list" class="m_nav menu__list">
								<li class="m_nav_item" id="moble_nav_item_6"> 
									<a href="login.html" class="link link--kumya">
										<span data-letters="登录/注册" th:text="${session.user.userName}==null?${session.user.userNickname}:${session.user.userName}">登录/注册</span>
									</a>
								</li>
							</ul> -->
							<div class="dropdown-back-white">
							  <span class="dropbtn-back-white" th:text="${session.user.userName}==null?${#strings.length(session.user.userNickname)>5?#strings.substring(session.user.userNickname,0,5)+'...':session.user.userNickname}:${#strings.length(session.user.userName)>5?#strings.substring(session.user.userName,0,5)+'...':session.user.userName}">登录/注册</span><i class="menu-ico-back-white"></i>
							  <div class="dropdown-content-back-white">
							    <a th:href="@{~/user/userInfo.html}">用户中心</a>
							    <a th:href="@{~/auth/longOut}">退出</a>
							  </div>
							</div>
						</nav>
					</div>

					</nav>
				</div>
		</div>
	
	
		<!--<div class="sleekslider" id="home">
	
			<div class="slide active bg-1">
				
			</div>	
		</div>	-->
		
		
      <!--welcome-->
 </div>
	</div>

<style type="text/css">
	.formd{padding-top: 120px; min-height: 892px;}
	.formdr{background: #fff; width:100%; height: 100%;}
	.formdl{padding: 80px 0 40px 0; min-height: 600px; }
	.formdl label{font-size: 14px;}
</style>
<div class="formd">
	

<div class=" container">
<div class="formdr col-lg-12" >
	<form th:action="@{/works/register}" class="col-md-offset-3 col-lg-6 formdl" id="works-form" method="post" onsubmit="return formCheck();">
 <!-- <input type="hidden" th:value="${session.token}" name="token"> -->
   <div class="form-group">
    <label for="inputEmail3" class="col-sm-3 control-label text-right"><span style="color: #FF0000;">*</span> 作品名称 </label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputEmail3" placeholder="作品名称" check-msg="请输入作品名称" name="worksName" th:value="${works.worksName}" maxlength="30">
      <input type="hidden" th:value="${works.worksId}" name="worksId">
    </div>
   <div style="clear: both;"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-3 control-label text-right"><span style="color: #FF0000;">*</span> 作品署名</label>
    <div class="col-sm-9">
      <input type="text" name="worksSign" class="form-control" id="inputPassword3" check-msg="请输入作品署名" placeholder="作品署名" th:value="${works.worksSign}" maxlength="30">
    </div>
    <div style="clear: both;"></div>
  </div>
  <div class="form-group" >
   <style type="text/css"> 

* { font-size:12px; } 
 .form-control{border-radius: 2px; border:1px solid #ccc;}
 .report-file {
            display: block;
            position: relative;
            width: 150px;
            height: 150px;
            overflow: hidden;
            border: 1px solid #ccc;
            color: #666;
            cursor: pointer;
            text-align: center;
            float: left;
            margin-right:5px;
        }
        .report-file span {
            cursor: pointer;
            display: block;
            line-height: 150px;
        }
        .file-prew {
            cursor: pointer;
            position: absolute;
            top: 0;
            left:0;
            width: 150px;
            height: 150px;
            font-size: 100px; 
            opacity: 0; 
            filter: alpha(opacity=0);
        }
        .btnn{padding: 10px 80px; background: #00BFFF; border-radius: 2px; color: #fff; }
         #wenzi{margin: 20px 0;}
        #wenzi p{ font-size: 12px;line-height: 30px;}
</style>  
   <label for="inputEmail3" class="col-sm-3 control-label text-right"><span style="color: #FF0000;">*</span> 上传作品 </label>
    <div class="col-sm-9">
   
   <div class="report-file">
      <span><img src="../static/images/sctp.jpg" th:src="@{~/images/sctp.jpg}" th:if="${works.worksUrl == null || works.worksUrl == ''}" style="height: 150px;"></span>
      <input tabindex="3" size="3" name="report" class="file-prew" type="file" onchange="uploadFile(this)">
      <input type="hidden" name="worksUrl" th:value="${works.worksUrl}" check-msg="请上传作品文件">
 </div>
 
 <input type="text" id="textName" style="height: 28px;border:0" />
  
  </div>
    <div style="clear: both;"></div>
  </div>
<div class="col-md-offset-3 col-lg-9">
	<div id="wenzi">
    <h2>上传作品文件说明：</h2>
   <p>1. 作品文件，是指您作品的电子文档，它将作为区块链版权登记的
       存证数据，可以是文字或图片格式</p>
   <p>2. 上传文件格式为.doc，.txt，.png，.jpg，.jpeg及.zip格式</p>
   <p>3. 文件大小不超过10M</p>
		
	</div>
	<button type="submit" class="btn btnn">提交</button>
</div>
  
</form>
<div style="clear: both;"></div>
</div>


</div>

</div>


<div style="clear: both;">
	
</div>
<!-- footer -->


	<div class="footer" >

    <div class="agileinfo_footer_bottom1">
			<div class="container">
				    <p class="col-lg-2" style="padding-right: 0;"><a th:href="@{~/}">关于我们</a>&nbsp;&nbsp;<a href="javascript:;">法律协议</a></p>
				
					<p class="col-lg-10 text-right"> &copy;2017 wevolution Allg Rights Reserved. powered by 上海我们信息科技有限公司 <img th:src="@{~/images/pic1.gif}"  style="margin-top:5px;"/> 沪ICP备17045920号</p>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
		

<!-- //footer -->
<!-- JavaScripts -->
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" th:src="@{~/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" src="../static/js/sleekslider.js" th:src="@{~/js/sleekslider.js}"></script>
<script type="text/javascript" src="../static/js/app.js" th:src="@{~/js/app.js}"></script>
<script src="../static/js/bootstrap.js" th:src="@{~/js/bootstrap.js}"></script>
<script src="../static/js/layer/layer.js" th:src="@{~/js/layer/layer.js}"></script>
<script th:src="@{~/js/loading.js}"></script>
<!-- //for bootstrap working -->
<script type="text/javascript">
$(function(){
	var file_name = $('input[name="worksUrl"]').val();
    if(file_name!=null&&file_name!=""){
	    var suffix_name = file_name.substr(file_name.lastIndexOf("."));  
	    if(suffix_name==".jpg"||suffix_name==".gif"||suffix_name==".png"||suffix_name==".bmp"){  
			$('input[name="worksUrl"]').prev().prev().html('<img src="'+file_name+'" style="height: 150px;">')
		}else if(suffix_name==".doc"||suffix_name==".docx"||suffix_name==".wps"||suffix_name==".wpt"){
			$('input[name="worksUrl"]').prev().prev().html('<img src="/images/word.png" style="height: 150px;">')
		}else if(suffix_name==".ppt"||suffix_name==".pptx"||suffix_name==".dps"||suffix_name==".dpt"){
			$('input[name="worksUrl"]').prev().prev().html('<img src="/images/ppt.png" style="height: 150px;">')
		}else if(suffix_name==".xls"||suffix_name==".xlsx"||suffix_name==".et"||suffix_name==".ett"){
			$('input[name="worksUrl"]').prev().prev().html('<img src="/images/ex.png" style="height: 150px;">')
		}else if(suffix_name==".pdf"){
			$('input[name="worksUrl"]').prev().prev().html('<img src="/images/pd.png" style="height: 150px;">')
		}else if(suffix_name==".txt"){
			$('input[name="worksUrl"]').prev().prev().html('<img src="/images/txt.png" style="height: 150px;">');
		}else{
			$('input[name="worksUrl"]').prev().prev().html('<img src="/images/zip.jpg" style="height: 150px;">')
		}
    }
})
function uploadFile(obj) {
	var formData = new FormData();
	formData.append('uploadfile', $(obj)[0].files[0]);
	formData.append('worksId', $("input[name='worksId']").val());
	 var file = $(obj)[0].files[0];
	 var _file_name = file.name;
	 var suffix_name = _file_name.substr(_file_name.lastIndexOf("."));  
	  //检测文件类型 .doc，.txt，.png，.jpg，.jpeg及.zip
	    if(suffix_name.indexOf('jpg')==-1 && suffix_name.indexOf('jpeg')==-1 && suffix_name.indexOf('png')==-1 && suffix_name.indexOf('txt')==-1 && suffix_name.indexOf('doc')==-1 && suffix_name.indexOf('zip')==-1 && suffix_name.indexOf('mp4')==-1) {
	    	layer.msg("文件类型非法"); 
		    return false; 
	    } else{
	        var size = Math.floor(file.size/1024);
            if(suffix_name.indexOf('jpg')!=-1 || suffix_name.indexOf('jpeg')!=-1 || suffix_name.indexOf('png')!=-1) {
                if (size > 400) {
                    layer.msg("上传图片不得超过400K");
                    return false;
                };
            }else{
                if (size > 10000) {
                    layer.msg("上传文件不得超过10M");
                    return false;
                };
            }

	     }
	 $('body').loading({
			loadingWidth:240,
			title:'上传中...',
			name:'fileupload',
			discription:'这是一个描述...',
			direction:'row',
			type:'origin',
			originBg:'#71EA71',
			originDivWidth:30,
			originDivHeight:30,
			originWidth:4,
			originHeight:4,
			smallLoading:false,
			titleColor:'#388E7A',
			loadingBg:'#312923',
			loadingMaskBg:'rgba(22,22,22,0.2)'
		});
	$.ajax({
		//url : "/works/worksFile",
		url : "/works/worksFileS3",
		type : "POST",
		data : formData,
		enctype : 'multipart/form-data',
		processData : false,
		contentType : false,
		cache : false,
		success : function(data) {
			removeLoading('fileupload');
			var jsondata = JSON.parse(data);
			if(jsondata.status=="0"){
				var _file_name = jsondata.data.fileName;
				$(obj).next().val(_file_name);
				$("input[name='worksId']").val(jsondata.data.worksId);
				var _suffix_name = _file_name.substr(_file_name.lastIndexOf("."));  
				//if(file.type.indexOf('image') != -1){
				if(_suffix_name==".png"||_suffix_name==".jpg"||_suffix_name==".jpeg"){
					$(obj).prev().html('<img src="'+ _file_name +'" style="height: 150px;">')
				}else if(_suffix_name==".doc"||_suffix_name==".docx"||_suffix_name==".wps"||_suffix_name==".wpt"){
					$(obj).prev().html('<img src="/images/word.png" style="height: 150px;">')
				}else if(_suffix_name==".ppt"||_suffix_name==".pptx"||_suffix_name==".dps"||_suffix_name==".dpt"){
					$(obj).prev().html('<img src="/images/ppt.png" style="height: 150px;">')
				}else if(_suffix_name==".xls"||_suffix_name==".xlsx"||_suffix_name==".et"||_suffix_name==".ett"){
					$(obj).prev().html('<img src="/images/ex.png" style="height: 150px;">')
				}else if(_suffix_name==".pdf"){
					$(obj).prev().html('<img src="/images/pd.png" style="height: 150px;">');
				}else if(_suffix_name==".txt"){
					$(obj).prev().html('<img src="/images/txt.png" style="height: 150px;">');
				}else{
					$(obj).prev().html('<img src="/images/zip.jpg" style="height: 150px;">');
				}
			}else{
				layer.msg(jsondata.msg);
			}
		},
		error : function() {
			layer.msg("服务器错误");
		}
	});

} // function uploadFile
function formCheck(){
	if($.trim($("input[name='worksName']").val()) ==""){
		layer.msg($("input[name='worksName']").attr("check-msg"));
		return false;
	}
	if($.trim($("input[name='worksSign']").val()) ==""){
		layer.msg($("input[name='worksSign']").attr("check-msg"));
		return false;
	}
	if($.trim($("input[name='worksUrl']").val()) ==""){
		layer.msg($("input[name='worksUrl']").attr("check-msg"));
		return false;
	}
	return true;
}
</script>
</body>
</html>